<template>
  <div v-if="film.length > 0">
    <myhead :title="this.film[0].name"></myhead>
    <van-tabs type="card" color="#ccc">
      <van-tab title="商品"></van-tab>
      <van-tab title="评价"></van-tab>
      <van-tab title="详情"></van-tab>
      <van-tab title="推荐"></van-tab>
    </van-tabs>
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item
        :v-if="film.sku_info"
        v-for="l in film[0].sku_info"
        :key="l.id"
        background-color="#000"
      >
        <img class="banner" :src="l.ali_image" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="main">
      <h2>￥{{ this.film[0].price }}<span>满88包邮</span></h2>
      <h3>{{ this.film[0].name }}</h3>
      <p>{{ this.film[0].shop_info.spu_mobile_sub_title }}</p>
    </div>
    <div class="main">
      <h3>已选版本</h3>
      <p>颜色:{{ this.film[0].sku_info[0].spec_json[0].item_value }}</p>
      <p>数量:1</p>
    </div>
    <div class="main">
      <h3>服务说明</h3>
      <h2>7天无理由退货<span>15天质量问题换货</span></h2>
    </div>
    <div class="good-main">
      <van-image class="img" :src="film[0].sku_info[0].ali_image"></van-image>
      <van-cell-group>
        <van-cell title="类别" :value="this.film[0].name"></van-cell>
        <van-cell title="活动双十一（全场一折）" value="1"></van-cell>
        <van-cell title="单价" :value="this.film[0].price"></van-cell>
        <van-cell title="购买数量(每人限购两台)" :value="this.film[0].price">
          <template>
            <van-stepper min="1" max="2" v-model.number="count"></van-stepper>
          </template>
        </van-cell>
        <van-cell title="购买总价(元)" :value="value.toFixed(2)"></van-cell>
      </van-cell-group>
    </div>
    <h2>商品详情</h2>
    <div class="commodity">
      <img
        :src="film[0].shop_info.tpl_content.base.images.ali_mobile.url[0]"
        alt=""
      />
    </div>
    <div>
      <van-goods-action>
        <van-goods-action-icon
          :color="res"
          icon="like"
          text="比心"
          :badge="likes"
          @click="goodlike"
        />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="sum"
          @click="gotopage('shop')"
        />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="addCart"
        />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="gotopay(film[0].id)"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Sku } from "vant";

Vue.use(Sku);
export default {
  data() {
    return {
      gid: null,
      count: 1,
      good: null,
      film: [],
      show: true,
      likes: 0,
      res: "",
      sum: 0,
    };
  },
  mounted() {
    this.$ajax.getshopcar({ phone: this.userInfo.phone }).then((res) => {
      this.sum = res.length;
    });
    this.gid = this.$route.query.ids;
    this.$ajax.getlike().then((res) => {
      this.likes = res.length;
    });
    this.getlikelength();
    this.checkHasLogined(() => {
      this.$ajax
        .getshopcar({
          phone: this.userInfo.phone,
        })
        .then((res) => {
          this.changecartList(res);
        });
    });
  },
  methods: {
    addCart() {
      this.checkHasLogined(() => {
        // 谁加入的
        //count
        //gid
        //good
        //先判断是否已经有该商品
        this.$ajax
          .getshopcar({
            gid: this.gid,
            phone: this.userInfo.phone,
          })
          .then((res) => {
            if (res.length > 0) {
              //购买过  数量累计
              this.$ajax
                .changeshopcar(res[0].id, {
                  count: this.count + res[0].count,
                })
                .then((res) => {
                  setTimeout(() => {
                    this.$toast("购物车添加成功");
                  }, 500);
                });
            } else {
              //没有购买直接新增
              this.$ajax
                .addshopcar({
                  gid: this.gid,
                  phone: this.userInfo.phone,
                  count: this.count,
                  good: this.film[0],
                })
                .then((res) => {
                  setTimeout(() => {
                    this.$toast("购物车新增成功");
                    this.$ajax
                      .getshopcar({ phone: this.userInfo.phone })
                      .then((res) => {
                        this.sum = res.length;
                      });
                  }, 500);
                });
            }
          });
      });
    },
    gotopay(id) {
      this.checkHasLogined(() => {
        this.$router.push({ name: "pay", query: { ids: id } });
      });
    },
    getlikelength() {
      this.$ajax.getlike({ gid: this.gid }).then((res) => {
        this.likes = res.length;
      });
    },
    // 点赞
    goodlike() {
      //   先判断当前用户是否已经登录
      this.checkHasLogined(() => {
        //先去查询是否已经点赞
        this.$ajax
          .getlike({
            phone: this.userInfo.phone,
            gid: this.gid,
          })
          .then((res) => {
            // console.log("123123",res,this.userInfo.phone,this.gid)
            if (res.length > 0) {
              // this.$toast('你已经点过赞了')
              this.$ajax.delLike(res[0].id).then((res) => {
                setTimeout(() => {
                  this.getlikelength();
                }, 1000);
                this.$toast("你取消了点赞");
                this.res = "";
              });
            } else {
              // 点赞
              this.$ajax
                .addLike({
                  gid: this.gid,
                  phone: this.userInfo.phone,
                })
                .then((res) => {
                  this.$toast("点赞成功");
                  this.res = "red";
                  setTimeout(() => {
                    this.getlikelength();
                  }, 1000);
                });
            }
          });
      });
    },
    //
  },
  computed: {
    value() {
      return ((this.film[0].price * 1) / 10) * this.count;
    },
  },
  created() {
    this.$ajax.getshop({ ids: this.$route.query.ids }).then((res) => {
      this.film = res.data.list;
    });
  },
};
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
}
.main {
  display: flex;
  border-top: 10px solid #ccc;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  border-left: 0;
  border-right: 0;
  h2 {
    margin: 0;
    display: flex;
    width: 100%;
    color: red;
    font-size: 12px;
    span {
      margin-left: 40%;
      color: #000;
    }
  }

  p {
    margin: 0;
    opacity: 0.7;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
}
.commodity {
  width: 100%;
  img {
    width: 100%;
  }
}
</style>